import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:xingsu/page/home/game_search_page.dart';
import 'package:xingsu/page/home/msg_page.dart';
import 'package:xingsu/page/home/viewModel/home_viewmodel.dart';
import 'package:xingsu/page/video/model/Video_model.dart';
import 'package:xingsu/res/colors.dart';
import 'package:xingsu/util/app_util.dart';
import 'package:xingsu/util/image_util.dart';
import 'package:xingsu/widget/search_widget.dart';

import '../video/video_page.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with AutomaticKeepAliveClientMixin {
  final HomeViewModel _viewModel = Get.put(HomeViewModel());

  @override
  Widget build(BuildContext context) {
    super.build(context);
    bool isDark = context.isDarkMode;
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 0,
      ),
      body: SafeArea(
          child: Column(
        children: [
          _topWidget(),
          Expanded(
              child: Obx(() => SmartRefresher(
                    controller: _viewModel.refreshController,
                    enablePullDown: true,
                    enablePullUp: true,
                    header: const WaterDropHeader(),
                    onRefresh: _viewModel.refreshData,
                    onLoading: _viewModel.loadMore,
                    child: ListView.separated(
                      separatorBuilder: (context, index) {
                        return index == _viewModel.datas.length - 1
                            ? const Divider(
                                height: 0,
                              )
                            : Container(
                                color: isDark
                                    ? const Color(0xFF050505)
                                    : const Color(0xFFF5F5F5),
                                height: 8,
                              );
                      },
                      itemBuilder: (context, position) {
                        return _itemWidget(position);
                      },
                      itemCount: _viewModel.datas.length,
                    ),
                  )))
        ],
      )),
    );
  }

  Widget _itemWidget(int index) {
    return homeItemWidget(
        index, _viewModel.page, _viewModel.datas.cast<VideoModel>());
  }

  Widget _topWidget() {
    bool isDark = context.isDarkMode;
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 15),
      alignment: Alignment.centerLeft,
      child: Row(
        children: [
          Expanded(
              child: SearchWidget(
            placeholder: "大家都在搜",
            controller: TextEditingController(),
            onSubmitted: (_) {},
            clickCallback: () {
              Get.to(() => GameSearchPage(_viewModel.datas.cast<VideoModel>()));
            },
          )),
          const SizedBox(
            width: 10,
          ),
          InkWell(
            onTap: () {
              Get.to(() => const MsgPage());
            },
            child: Container(
                width: 38,
                height: 38,
                padding: const EdgeInsets.all(8),
                child: loadAssetImage(
                  "icon_msg",
                  color: isDark ? Colours.bg_gray : Colours.dark_material_bg,
                )),
          ),
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

Widget homeItemWidget(int index, int page, List<VideoModel> videoList) {
  VideoModel model = videoList[index];
  return InkWell(
    onTap: () {
      Get.to(() => VideoPage(
            page: page,
            position: index,
            videoList: videoList,
          ));
    },
    child: Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
      margin: const EdgeInsets.symmetric(vertical: 5),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(15),
                child: loadNetworkImage(model.userAvatar ?? "",
                    width: 30, height: 30),
              ),
              const SizedBox(
                width: 5,
              ),
              Text(
                model.userName ?? "",
                style: const TextStyle(fontSize: 14),
              )
            ],
          ),
          const SizedBox(
            height: 10,
          ),
          Text(
            model.videoTitle ?? "",
            style: const TextStyle(color: Colors.grey, fontSize: 13),
          ),
          const SizedBox(
            height: 10,
          ),
          SizedBox(
            height: (Get.width - 40) * 192 / 335,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(5),
              child: Stack(
                children: [
                  ConstrainedBox(
                      constraints: const BoxConstraints.expand(),
                      child: loadNetworkImage(model.gameCoverImg ?? "")),
                  ConstrainedBox(
                      constraints: const BoxConstraints.expand(),
                      child: Container(
                        color: Colors.black12,
                      )),
                  Align(
                    alignment: Alignment.center,
                    child: loadAssetImage("icon_play", width: 36, height: 36),
                  ),
                  Positioned(
                      left: 6,
                      bottom: 8,
                      child: Row(
                        children: [
                          Container(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 8, vertical: 5),
                            decoration: BoxDecoration(
                                color: Colors.black45,
                                borderRadius: BorderRadius.circular(2)),
                            child: Text(
                              AppUtil.convertHMS(model.videoDuration ?? 0),
                              style: const TextStyle(
                                  color: Colors.white, fontSize: 12),
                            ),
                          ),
                          const SizedBox(
                            width: 10,
                          ),
                          Text(
                            "${model.playCount ?? 0}观看",
                            style: const TextStyle(
                                color: Colors.white, fontSize: 13),
                          )
                        ],
                      ))
                ],
              ),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Row(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(4),
                child: loadNetworkImage(model.gameIcon ?? "",
                    width: 16, height: 16),
              ),
              const SizedBox(
                width: 5,
              ),
              Text(
                model.gameTitle ?? "",
                style:
                    const TextStyle(fontWeight: FontWeight.w700, fontSize: 11),
              )
            ],
          )
        ],
      ),
    ),
  );
}
